import axios from "axios";
import React, { useEffect, useState } from "react";
import Tabbar from "../../components/Tabbar/index";
import { useNavigate } from "umi";
import "./index.scss";
import { defaultImg } from "../../utils/tools";
import { JumboTabs, Card, PullToRefresh, List, Avatar } from "antd-mobile";

interface userInfo {
  id?: number;
  name?: string;
  nickname?: string;
  password?: string;
  email?: string;
  address?: string;
  avatar?: string;
  age?: string;
}

export default function index() {
  const navigate = useNavigate();
  const [cityWeather, setWeather] = useState<Array<any>>([]);
  const [weatherKey, setKey] = useState<string>("");
  const [userList, setUserList] = useState<userInfo>();
  // 查询当前用户的个人信息
  const userInfo = async () => {
    const res = await axios({
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        token: localStorage.getItem("token"),
      },
      method: "get",
      url: `http://43.139.124.13:8888/user/${localStorage.getItem("userId")}`,
    });
    setUserList(res.data.data);
    console.log(res.data.data);
  };
  // 杭州市天气 基础数据
  useEffect(() => {
    axios
      .get(
        "https://www.tianqiapi.com/api/?appid=23035354&appsecret=8YvlPNrz&version=v9&cityid=0&city=%E9%9D%92%E5%B2%9B&ip=0&callback=0",
        {
          params: {
            city: "杭州",
          },
        }
      )
      .then((res: any) => {
        if (res.status === 200) {
          setWeather(res.data.data);
          setKey(res.data.data[0].date);
        }
      });
    userInfo();
  }, []);
  return (
    <div className="user">
      <PullToRefresh
        onRefresh={async () => {
          await axios
            .get(
              "https://www.tianqiapi.com/api/?appid=23035354&appsecret=8YvlPNrz&version=v9&cityid=0&city=%E9%9D%92%E5%B2%9B&ip=0&callback=0",
              {
                params: {
                  city: "杭州",
                },
              }
            )
            .then((res: any) => {
              if (res.status === 200) {
                setWeather(res.data.data);
                setKey(res.data.data[0].date);
              }
            });
        }}
      >
        <Card>
          <JumboTabs
            defaultActiveKey={weatherKey}
            activeKey={weatherKey}
            onChange={(key) => {
              setKey(key);
            }}
          >
            {cityWeather.map((element: any) => (
              <JumboTabs.Tab
                title={element.day}
                description={element.wea}
                key={element.date}
              ></JumboTabs.Tab>
            ))}
          </JumboTabs>
        </Card>
        {/* 个人头像和名字信息 */}
        <div className="userLogin">
          <Avatar
            style={{ "--size": "64px" }}
            src={defaultImg(userList?.avatar)}
          />
          <div className="name">{userList?.nickname}</div>
        </div>
        {/* 订单信息 */}
        <List header="订单">
          <List.Item
            onClick={() => {
              navigate("/orderlist");
            }}
          >
            查看订单
          </List.Item>
          <List.Item
            onClick={() => {
              navigate("/payOk");
            }}
          >
            已支付列表
          </List.Item>
        </List>
        {/* 个人设置信息 */}
        <List header="个人设置">
          <List.Item
            onClick={() => {
              navigate("/modify");
            }}
          >
            更改信息
          </List.Item>
        </List>
        <Tabbar></Tabbar>
      </PullToRefresh>
    </div>
  );
}
